<!--
 * @Author: GKN
 * @Date: 2023-10-24 11:53:29
 * @LastEditTime: 2024-01-22 16:55:11
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\user\member\vip.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div>
    <div class="vtitle">选择套餐</div>
    <div class="flex flex-w">
        <div class="subscribe" v-for="(item,i) in list_subscribe" :key="i">
            <div :class="item.select?'active item':'item'" @click="click_subscribe(i,item.select)">
                {{item.Name}}
            </div>
        </div>
    </div>
    <div style="padding:30px 20px;">
        <ul style="list-style:disc;">
            <!-- <li class="tiplist" v-for="(item,i) in list_subscribe[tc_index].desc" :key="i">
                {{item}}
            </li> -->
        </ul>
        
    </div>
    <div class="vtitle">订单金额</div>
    <div class="vipview shadow-1" style="margin-top:22px;padding:28px 18px;">
        <div class="pview" >
            <span class="p1">￥</span>
            <span class="p2">{{list_subscribe.length>0?list_subscribe[tc_index].Price:''}}</span>
            <span class="p3">时长：{{list_subscribe.length>0?list_subscribe[tc_index].Month:''}}个月</span>
        </div>
        
    </div>
    <div class="flex-d flex-align" style="margin-top:62px;">
        <div @click="pay" class="btn-submit">立即下单</div>
        <div>
            <el-checkbox v-model="checked1" label="阅读并同意vip服务协议" size="large" />
        </div>
        <el-dialog v-model="is_pay" title="" width="40%" style="border-radius:15px;padding-bottom:10px;">
            <div style="font-size:24px;font-weight:bold;color:#333;">确认付款</div>
            <div style="width: 100%;margin-top:75px;">
                <el-row :gutter="20">
                    <!-- <el-col :span="8">
                        <div class="code" ref="qrCodeUrl">
                            <qrcode-vue :value="codeUrl" :size="size" level="H" />
                        </div>
                    </el-col> -->
                    <el-col :span="24">
                        <div style="font-size:17px;color:#333;text-align:left;">在线支付</div>
                        <div class="payType cursor-p" style="margin-top:20px;">
                            <div v-for="(item,i) in list_payType" :key="i" :class="item.select?'active item ':'item'" @click="click_payType(i)">
                                <img v-if="i==0" class="ad-img" src="~@/assets/img/user/p1.png" alt="">
                                <img v-if="i==1" class="ad-img" src="~@/assets/img/user/p2.png" alt="">
                                <span>{{item.name}}</span>
                            </div>
                        </div>
                        <div style="font-size:16px;color:#333;text-align:left;margin-top:28px;">
                            <span>应付金额￥ </span>
                            <span style="color:#d00b00;font-size:18px;font-weight:bold;">{{list_subscribe.length>0?list_subscribe[tc_index].Price:''}}</span>
                        </div>
                        <div style="margin-top:15px;font-size:13px;color:#8d8d8d;text-align:left;">
                            剩余支付时间
                            <span></span>，否则订单将自动失效
                        </div>
                        <div class="btn-submit" @click="payclick" style="margin:50px auto;">立即支付</div>
                    </el-col>
                </el-row>
                
            </div>
        </el-dialog>
    </div>
    <div class="vipview shadow-1" style="margin-top:117px;">
        <div class="title " style="text-align:center;">开通全年超级VIP享以下特权</div>
        <div class="flex " style="margin-top:33px">
            <div class="item">
                <div class="img shadow-1">
                    <img class="ad-img" src="~@/assets/img/user/a1.png" alt="">
                </div> 
                <div class="cont">
                    <div class="t omit">
                        <p>全站VIP文档</p><p>免费下载</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="img shadow-1">
                    <img class="ad-img" src="~@/assets/img/user/a2.png" alt="">
                </div> 
                <div class="cont">
                    <div class="t omit">
                        <p>全站热门视频</p><p>免费观看完整版</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="img shadow-1" >
                    <img class="ad-img" src="~@/assets/img/user/a4.png" alt="">
                </div> 
                <div class="cont">
                    <div class="t omit">
                        <p>研判定制</p><p>享受8折</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="img shadow-1">
                    <img class="ad-img" src="~@/assets/img/user/a5.png" alt="">
                </div> 
                <div class="cont">
                    <div class="t omit">
                        <p>VIP拓展服务</p><p>享受8折</p>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
  </div>
</template>

<script setup>
import { ref,reactive,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import QrcodeVue from 'qrcode.vue'
    const checked1 = ref(false)
    const tc_index = ref(0)
    const list_subscribe = ref([])
    const codeUrl = ref('https://www.baidu.com')
    const size = ref(180);
    const getlist=()=>{
        proxy.$http.request(proxy.$api.vip_list,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    // proxy.$comJs.msg('error','提交失败')
                }else{
                    res.data.data.list.map((item,i)=>{
                        list_subscribe.value.push({
                            ...item,
                            select:i==0?true:false
                        })
                    })
                }
            }
        })
    }
    getlist()
    const click_subscribe = (i,type)=>{
        list_subscribe.value.map((item)=>{
            item.select = false
        })
        list_subscribe.value[i].select = !type
        tc_index.value = i
    }
    const is_pay = ref(false)
    const index_payType = ref(0)
    const list_payType = ref([
        {name:'支付宝支付',select:true},{name:'微信支付',select:false}
    ])
    const click_payType = (i)=>{
        list_payType.value.map((item)=>{
            item.select = false
        })
        list_payType.value[i].select = true
        index_payType.value = i
    }
    const pay = ()=>{
        if(list_subscribe.value.length==0){
            proxy.$comJs.msg('error','未查询到vip信息')
            return;
        }
        is_pay.value = true
    }
    const payclick=()=>{
        proxy.$http.request(proxy.$api.pay,'post',{
            "payWay":index_payType.value==0?1:2,
            "source":1,
            "threeId":list_subscribe.value[tc_index.value].VipId
        },false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    proxy.$comJs.msg('error','提交失败')
                }else{
                    window.open(res.data.data.data)
                }
            }
        })
    }

</script>

<style lang='less' scoped>
.vipview{
    width: 100%;
    padding:47px 48px 41px 48px;
    background: linear-gradient(to bottom, rgba(255, 250, 248, 1), rgba(255, 225, 205, 1));
    border-radius: 10px 10px 10px 10px;
    .title{
        font-size: 30px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #77472F;
        padding-top: 0;
    }
    .center{
        display: flex;
    }
    .item{
        width: 25%;
        padding: 0 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .img{
            width: 68px;
            height: 68px;
            border-radius:50%;
            overflow: hidden;
        }
        .cont{
            padding-top: 20px;
            .t{
                font-size: 16px;
                // text-align: left;
                color: #78482f;
            }
            .c{

                font-size: 12px;
                text-align: left;
                color: #8d8d8d;
            }
        }
    }
    .btn{
        width: 350px;
        height: 48px;
        background: #D10B00;
        border-radius: 24px 24px 24px 24px;
        opacity: 1;
        border: 1px solid #D10B00;
        font-size: 16px;
        color: #fff;
        line-height: 48px;
        margin: 40px auto;
    }
}
.pview{
    display: flex;
    justify-content: flex-start;
    .p1{
        font-size: 16px;
        color: #333;
    }
    .p2{
        font-size: 18px;
        color: #D10B00;
        margin-left: 18px;
    }
    .p3{
        font-size: 16px;
        color: #333;
        margin-left: 30px;
    }
}
.vtitle{
   font-size: 22px;
   font-weight: bold;
   color: #333; 
   text-align: left;
}
.subscribe{
    width: 25%;
    padding: 14px;
    .item{
        border-radius: 30px;
        border:1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
        text-align: center;
    }
    .active{
        background: #d00b00;
        color: #fff;
    }
}
.tiplist{
    margin-bottom: 10px;
    font-size: 17px;
        color:#333333;
        text-align: left;
}
.payType{
    display: flex;
    .item{
        width: 148px;
        height: 56px;
        border:1px solid #e8e8e8;
        display: flex;
        align-items: center;
        margin-right: 15px;
        border-radius: 6px;
        padding: 0 5px;
        img{
            width: 28px;
            height: 20px;
        }
        span{
            color: #8d8d8d;
            font-size: 18px;
            margin-left: 12px;
        }
    }
    .active{
        border:1px solid #fcbdbd;
    }
}
.code{
    width: 174px;
    height: 174px;
    background: #c1c1c1;
    border-radius: 10px;
}
</style>

